<template>
	<view>
		<view class="main">
			<view class="top">
				<text class="top-text">个人入园凭证</text>
			</view>
			<view class="time">
				<text class="time-text">2024年5月30日 13:00-16:00</text>
			</view>
			<view class="yuyue">
				<text class="yuyue-text"></text>预约信息
			</view>
			<view>
				<uni-card class="card">
					
					<view class="msg">姓名:{{user.name1}}</view>
			
					<view class="msg">证件类型：{{user.id1}}</view>
			
					<view class="msg">证件号码：{{user.sn1}}</view>
			
					<view class="msg">手机号码：{{user.pnumber1}} </view>
			
					<view class="msg">同行儿童数：{{user.kids1}}人 </view>
			
					<view class="msg">同行成人：预约人{{user.people1}}、预约人{{user.people2}}、预约人{{user.people3}}、预约人{{user.people4}} </view>
				</uni-card>
				<view class="huacao">
					<text class="huacao-text">园区花草，种植不易请爱护</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<text class="bottom-text1">离凭证消失剩余<text class="bottom-text2">3小时56分钟</text>。可发起新的预约</text>
		</view>
	</view>
</template>

<script setup>
	import { ref , reactive } from 'vue';
	import axios from 'axios';
	
	let user = reactive({
		name1:'',
		sn1:''
	})
	axios.get("/data.json").then(function(result){
		console.info(result.data)
		console.info(result.data.user)
		user.name1 = result.data.user.name
		user.id1 = result.data.user.id
		user.sn1 = result.data.user.sn
		user.pnumber1 = result.data.user.pnumber
		user.kids1 = result.data.user.kids
		user.people1 = result.data.user.people1
		user.people2 = result.data.user.people2
		user.people3 = result.data.user.people3
		user.people4 = result.data.user.people4
		console.info(user.value)
	}).catch().finally()
	// let getJsonValue = function(){
	// 	axios.get("/data.json").then(function(result){
	// 		console.info(result.data)
	// 		console.info(result.data.user)
	// 		user.name1 = result.data.user.name
	// 		user.id1 = result.data.user.id
	// 		user.sn1 = result.data.user.sn
	// 		user.pnumber1 = result.data.user.pnumber
	// 		user.kids1 = result.data.user.kids
	// 		user.people1 = result.data.user.people1
	// 		user.people2 = result.data.user.people2
	// 		user.people3 = result.data.user.people3
	// 		user.people4 = result.data.user.people4
	// 		console.info(user.value)
	// 	}).catch().finally()
	// }
</script>

<style scoped>
	.main {
		width: 100%;
		height: 578px;
		background-image: url("../../static/bg.png");
	}
	.huacao{
		margin-top: 60px;
		text-align: center;
	}
	.huacao-text{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.top{
		text-align: center;
		height: 85px;
	}
	.time{
		text-align: center;
		position: relative;
		top: -10px;
	}
	.bottom{
		text-align: center;
		margin-top: 41px;
		height: 41px;
	}
	.bottom-text1{
		color: #5f5f5f;
		 font-size: 12px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
	}
	.bottom-text2{
		color: #8dcb6d;
		 font-size: 12px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
	}
	.msg{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.yuyue{
		text-align: left;
		margin-left: 15px;
		margin-top: 40px;
	}
	.yuyue-text{
		font-family: PingFangSC-Medium;
		font-weight: bold;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.time-text{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.top-text{
		opacity: 0.9;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 20px;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		
		line-height: 85px;
	}
</style>